<template>
  <div class="container">
    <el-dialog :visible.sync="dialogVisible" width="25%" :before-close="cancel">
      <template #title>
        <span style="color: white">
          {{ ruleForm.id ? '修改学科' : '新增学科' }}
        </span>
      </template>
      <el-form
        :model="ruleForm"
        :rules="ruleFormRules"
        ref="ruleForm"
        label-width="80px"
      >
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            v-model="ruleForm.subjectName"
            placeholder="请输入学科名称"
            @blur="ruleForm.subjectName = $event.target.value.trim()"
          />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="ruleForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { detail } from '../../api/hmmm/subjects'
export default {
  props: {
    dialogVisible: { type: Boolean, default: false }
  },
  data () {
    return {
      // 表单数据
      // isFrontDisplay: true,
      ruleForm: { subjectName: '', id: null, isFrontDisplay: 1 },
      // 校验规则
      ruleFormRules: {
        subjectName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // // 展示学科详情（父子通信）
    // async showSubject (id) {
    //   const { data } = await detail({ id: id })
    //   this.ruleForm = data
    // },

    // 取消添加/修改
    cancel () {
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        subjectName: '',
        id: null,
        isFrontDisplay: 1
      }
      this.$emit('update:dialogVisible', false)
    },
    // 确定添加/修改
    async btnOk () {
      await this.$refs.ruleForm.validate()
      if (this.ruleForm.id) {
        // 如果有id 触发修改事件
        this.$emit('editSubject', this.ruleForm)
      } else {
        // 否则是 新增
        this.$emit('addSubject', this.ruleForm)
        this.$emit('getSubjectsList')
      }
      // 都要 渲染页面 重置表单 清空数据
      this.cancel()
    }
  }
}
</script>

<style scoped lang="less"></style>
